<template>
  <div class="execution">
    <basic-container>
      <el-card class="filter-container" shadow="never">
        <div style="margin-top: 10px">
          <el-form :inline="true" size="small" label-width="140px">
            <el-form-item label="店铺">
              <el-select v-model="listQuery.storeId" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.storeId"
                  :label="item.storeName"
                  :value="item.storeId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="getList" type="primary" size="small"
                >查询结果</el-button
              >
              <el-button @click="handleResetSearch" size="small">
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <div style="margin-top: 10px">
        <el-table
          :data="list"
          border
          :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }"
        >
          <el-table-column
            label="店铺Id"
            align="center"
            prop="storeId"
          ></el-table-column>
          <el-table-column
            label="店铺名称"
            align="center"
            prop="storeName"
          ></el-table-column>
          <el-table-column
            label="店铺联系人"
            align="center"
            prop="contactName"
          ></el-table-column>
          <el-table-column
            label="店铺联系电话"
            align="center"
            prop="contactPhone"
          ></el-table-column>

          <el-table-column
            label="企业名称"
            align="center"
            prop="companyName"
          ></el-table-column>
          <el-table-column
            label="收入总金额"
            align="center"
            prop="storeIncomeAmount"
          ></el-table-column>
          <el-table-column label="操作" min-width="150" align="center">
            <template slot-scope="{ row }">
              <el-button size="mini" @click="handleSee(row)" type="text" plain
                >查看明细</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.size"
          :page-sizes="[5, 10, 15]"
          :current-page.sync="listQuery.current"
          :total="total"
        >
        </el-pagination>
      </div>
    </basic-container>
  </div>
</template>
<script>
import "@/styles/index.scss";
import { fetchList } from "@/api/profit/shop/index";
import { getStore } from "@/api/rms/rmsstore";

const defaultListQuery = {
  current: 1,
  size: 10,
  storeId: null,
};

export default {
  data() {
    return {
      options: [],
      listQuery: Object.assign({}, defaultListQuery),
      list: [],
      total: 0,
    };
  },
  created() {
    this.getList();
    this.getStoreList();
  },
  methods: {
    getStoreList() {
      getStore().then((res) => {
        this.options = res.data.data;
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    getList() {
      fetchList(this.listQuery).then((res) => {
        this.list = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    handleResetSearch() {
      this.listQuery = Object.assign({}, this.defaultListQuery);
    },
    handleSee(row) {
      this.$router.push({
        path: "/profit/shop/details",
        query: {
          storeId: row.storeId,
        },
      });
    },
  },
};
</script>